<script setup>
//1. 定义一个属性
// let propos = defineProps(['money' , 'books'
//
// ])

let propos = defineProps({
  money: {
    type: Number,
    required: true,
    default: 1000
  },
  books: {
    Array,
    required: true,
    default: () => {
      return ['vue3', 'react']
    }
  }
})
let deposit = () => {
  propos.money += 10000
}
let consume = () => {
  propos.money -= 3000
}

//todo 使用emit：
const emit = defineEmits(['buy']);
let buy = () => {
  emit('buy', -80_0000);
}
</script>

<template>
  <div style="background-color: #64bebe">
<!--    <h3>Son</h3>-->
    <h3>
      <slot name="title">
        嘿嘿，我是儿子组件
      </slot>
    </h3>
    <div>账户余额:{{ propos.money }}</div>
    <!--    <button @click="deposit">存款</button>-->
    <!--    <button @click="consume">消费</button>-->
    <div>图书：
      <li v-for="book in propos.books">{{ book }}</li>
    </div>
    <button @click="buy">买车
      <slot name="btn">
      </slot>
    </button>
  </div>

</template>

<style scoped>

</style>